<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :destroyOnClose="true"
    showFooter
    width="70%"
    @ok="handleSubmit"
  >
    <template #title>
      <Tag color="green" style="font-size: 16px">{{ title }}</Tag> 表代码生成预览
    </template>

    <Tabs v-model:activeKey="activeTabKey[0]">
      <TabPane :key="index" :tab="item.key" v-for="(item, index) of tabListData">
        <div style="height: calc(100vh - 209px)">
          <template v-if="item.tabsList">
            <Tabs
              v-model:activeKey="activeTabKey[1]"
              type="card"
              tabPosition="left"
              :tabBarStyle="tabBarStyle"
            >
              <TabPane v-for="(fItem, fIndex) of item.tabsList" :key="fIndex" :tab="fItem.key">
                <div style="height: calc(100vh - 209px); overflow: auto">
                  <!-- 单独处理一下ts文件，有些时候autodetect不会高亮， 需要指定文件-->
                  <highlightjs
                    v-if="getLanguageByFileName(fItem.key) == 'ts'"
                    language="typescript"
                    :autodetect="false"
                    :code="fItem.value"
                  />
                  <highlightjs v-else autodetect :code="fItem.value" />
                </div>
              </TabPane>
            </Tabs>
          </template>
          <template v-else> <div style="text-align: center">暂无代码生成预览</div> </template>
        </div>
      </TabPane>
    </Tabs>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tag, Tabs, TabPane } from 'ant-design-vue';
  import { GenCodePreviewModel } from '/@/api/gen/model/CodeGenModel';
  const emit = defineEmits(['success', 'register']);
  const activeTabKey = ref([0, 0]);
  const title = ref('');
  const tabBarStyle = reactive({
    minWidth: '200px',
  });

  const genCodes = ref<GenCodePreviewModel>();
  const tabListData = computed(() => [
    {
      key: '后端文件',
      tabsList:
        genCodes.value?.afterEndCode &&
        Object.entries(genCodes.value.afterEndCode).map(([key, value]) => ({
          key: formatCodesKey(key),
          value,
        })),
    },
    {
      key: '前端文件',
      tabsList:
        genCodes.value?.frontEndCode &&
        Object.entries(genCodes.value.frontEndCode).map(([key, value]) => ({
          key: formatCodesKey(key),
          value,
        })),
    },
    {
      key: 'SQL文件',
      tabsList:
        genCodes.value?.sqlCode &&
        Object.entries(genCodes.value.sqlCode).map(([key, value]) => ({
          key: formatCodesKey(key),
          value,
        })),
    },
    {
      key: '其他文件',
      tabsList:
        genCodes.value?.otherCode &&
        Object.entries(genCodes.value.otherCode).map(([key, value]) => ({
          key: formatCodesKey(key),
          value,
        })),
    },
  ]);

  const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
    title.value = data!.title;
    const previewCodeApi = data!.previewApi as () => Promise<GenCodePreviewModel>;
    genCodes.value = await previewCodeApi();
  });

  //格式化后端代码key(文件地址格式化为文件名)
  function formatCodesKey(key: string) {
    return key.substring(key.lastIndexOf('\\') + 1);
  }

  function handleSubmit() {
    closeDrawer();
    emit('success');
  }

  function getLanguageByFileName(fileName: string): string {
    const s = fileName.split('.');
    return s[s.length - 1];
  }
</script>

<style lang="less" scoped></style>
